{% if articles.hasPages %}

<ul class="pagination" role="navigation">
    {% if articles.onFirstPage %}
    <li class="page-item disabled" aria-disabled="true">
        <span class="page-link"><<</span>
    </li>
    {% else %}
    <li class="page-item">
        <a class="page-link" href="{{ articles.previousPageUrl }}" rel="prev"><<</a>
    </li>
    {% endif %}

    {% for element in elements %}

        {% if element is string %}
        <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ element }}</span></li>
        {% endif %}

        {% if element is array %}
            {% for page,url in element %}
            {% if (page == articles.currentPage) %}
            <li class="page-item active" aria-current="page"><span class="page-link">{{ page }}</span></li>
            {% else %}
            <li class="page-item"><a class="page-link" href="{{ url }}">{{ page }}</a></li>
            {% endif %}
            {% endfor %}
        {% endif %}

    {% endfor %}

    {% if articles.hasMorePages %}
    <li class="page-item">
        <a class="page-link" href="{{ articles.nextPageUrl }}" rel="next">>></a>
    </li>
    {% else %}
    <li class="page-item disabled" aria-disabled="true">
        <span class="page-link">>></span>
    </li>
    {% endif %}
</ul>

{% endif %}